import React, { useEffect, useState } from 'react'
import api from '@/api'
import {
    Space, Table, Tag, Image, Button, Drawer, message,
    Cascader,
    Checkbox,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Radio,
    Select,
    Switch,
    TreeSelect,
    Upload,
    Pagination
} from 'antd';
import type { ColumnsType } from 'antd/es/table';

import { SearchOutlined, EditOutlined, CloseOutlined, PlusOutlined } from '@ant-design/icons';
const { RangePicker } = DatePicker;
const { TextArea } = Input;
export default function User() {
    useEffect(() => {
        shopList(send)
    }, [])
    let [userid, setUserid] = useState()
    const [form] = Form.useForm();
    const [total, setTotal] = useState()
    const [open, setOpen] = useState(false);
    const [isadd, setisadd] = useState(false);
    const [write, setwrite] = useState(false);
    const [list, setlist] = useState([])
    const [data, setdata] = useState({
        title: "",
        detail: '',
        vedio: '',
    })
    const [send, setsend] = useState({
        pageSize: 1,
        currentPage: 1,
        classid: 0

    })
    const shopList = async (params: any) => {
        const res = await api.worker.getWorkerPost(params)
        setlist(res.data.data)
        setTotal(res.data.total)
        console.log('list', res.data);
        console.log(res.data.total);
    }
    const onClose = () => {
        setOpen(false);
    };

    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        tags: string[];
    }
    const adduser = () => {
        setisadd(true)
        form.setFieldsValue({
            title: "",
            detail: '',
            vedio: '',
        });
        setOpen(true);
    }

    async function insertdetail(arg: any) {
        console.log(arg);

        setUserid(arg)
        const res = await api.worker.getOneShare({ id: arg })

        setisadd(false)
        setdata({
            title: res.data.data[0].title,
            detail: res.data.data[0].detail,
            vedio: res.data.data[0].vedio
        })
        form.setFieldsValue({
            title: res.data.data[0].title,
            detail: res.data.data[0].detail,
            vedio: res.data.data[0].vedio
        });

        setOpen(true);
    }
    const getDetail = async (arg: any) => {
        insertdetail(arg)
        setwrite(false)
    }

    const setDetail = (arg: any) => {
        insertdetail(arg)
        setwrite(true)

    }
    const deletethis = async (arg: any) => {
        console.log(arg);
        const res = await api.worker.delShare({ id: arg })
        if (res.data.code == 200) {
            message.success('删除成功')
            shopList(send)
        }
    }
    const normFile = (e: any) => {
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };
    const columns: ColumnsType<DataType> = [
        {
            title: '帖子题目',
            dataIndex: 'title',
            key: 'title'
        },
        {
            title: '帖子类型',
            dataIndex: 'class',
            key: 'class',
        },
        {
            title: '内容',
            dataIndex: 'detail',
            key: 'detail',

        },
        {
            title: '视频',
            dataIndex: 'avatar',
            render: (_, arg) => {
                return (
                    <Button>点击查看</Button>
                )
            }
        },
        {
            title: '操作',
            dataIndex: 'id',
            render: (record) => (
                <label >
                    <Button type="primary" shape="circle" icon={<SearchOutlined />} onClick={() => getDetail(record)} style={{ margin: '0 10px' }}></Button>
                    <Button type="primary" ghost shape="circle" icon={<EditOutlined />} onClick={() => setDetail(record)} style={{ margin: '0 10px' }} />
                    <Button type="primary" danger shape="circle" icon={<CloseOutlined />} onClick={() => deletethis(record)} style={{ margin: '0 10px' }}></Button>
                </label>
            ),
        },
    ]
    function pageChange(args: any) {
        shopList({ ...send, currentPage: args })
        setsend({ ...send, currentPage: args })
    }
    async function submit(arg: any) {
        if (isadd) {
            console.log(typeof arg.vedio);

            const res = await api.worker.addWorkerShare(arg)
            console.log(res.data);
            if (res.data.code == 200) {
                message.success('添加成功')
                setOpen(false)
            }
            shopList(send)
        } else {
            const res = await api.worker.updateShare({ ...arg, id: userid })
            console.log(res.data);
            if (res.data.code == 200) {
                message.success('修改成功')
                setOpen(false)
            }
            shopList(send)
        }

    }
    const [avatar, setAvatar] = useState('')
    function handleChange(args: any) {
        console.log(typeof args);
        shopList({ ...send, currentPage: 1, classid: args })
        setsend({ ...send, currentPage: 1, classid: args })

    }

    return (
        <div>
            <Select
                defaultValue="选择分类"
                style={{ width: 120 }}
                onChange={handleChange}
                options={[
                    { value: 1, label: '服务' },
                    { value: 2, label: '维修' },
                    { value: 3, label: '厨师' },
                    { value: 0, label: '全部' },
                ]}
            />
            {list ?
                <>
                    <Button style={{ position: 'absolute', right: '10px', zIndex: '2', }} type="primary" danger onClick={adduser} >+</Button>
                    <Table columns={columns} dataSource={list} pagination={false} />
                    <Drawer title="用户" placement="right" onClose={onClose} open={open}>
                        <Form
                            labelCol={{ span: 4 }}
                            wrapperCol={{ span: 14 }}
                            layout="horizontal"
                            style={{ maxWidth: 600 }}
                            onFinish={submit}
                            form={form}
                        >

                            <Form.Item label="帖子题目:" name='title' >
                                <Input value={data.title} />
                            </Form.Item>

                            <Form.Item label="帖子内容" name='detail'>
                                <Input value={data.detail} />
                            </Form.Item>

                            <Form.Item label="视频" name='vedio'>
                                <Input value={data.vedio} />
                            </Form.Item>
                            {isadd ? <Form.Item label='类型' name='classid'>
                                <Select options={[
                                    { value: 1, label: '服务' },
                                    { value: 2, label: '维修' },
                                    { value: 3, label: '厨师' },

                                ]}></Select>
                            </Form.Item> : <></>}
                            {isadd ? <Form.Item >
                                <Button htmlType='submit'>添加</Button>
                            </Form.Item> : <Form.Item >
                                {
                                    write ? <Button htmlType='submit'>修改</Button> : <Button onClick={() => { setOpen(false) }}>确定</Button>
                                }
                            </Form.Item>}


                        </Form>
                    </Drawer>
                    <Pagination total={total} current={send.currentPage} pageSize={send.pageSize} onChange={pageChange}></Pagination>
                </> : <></>}
        </div>
    )
}
